<template>
	<view>
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green">
			<block slot="content">个人中心</block>
		</cu-custom>
		
		<!-- 顶部头像区域 -->
		<view class="text-black text-xl margin">
			<!-- 未登录 -->
			<navigator v-if="!token" class="flex align-center justify-between margin-left-sm margin-right margin-tb-xl" url="/pages/login/login" hover-class="none">
				<view>
					<view class="cu-avatar xl round margin-right" :style="{'background-image': 'url(' + '../../static/logo.jpg' + ');'}"></view>
					登录 / 注册
				</view>
				<view class="cuIcon-right margin-right"></view>
			</navigator>
			
			<!-- 登录 -->
			<navigator v-else class="flex align-center justify-between margin-left-sm margin-right margin-tb-xl" url="/pages/my-info/my-info" hover-class="none">
				<view>
					<view class="cu-avatar xl round margin-right" :style="{'background-image':'url('+ avatar +')'}"></view>
					{{ realName }}
				</view>
				<view class="cuIcon-right margin-right"></view>
			</navigator>
		</view>
		
		<!-- 课程 -->
		<view class="cu-card bg-white margin-left margin-right margin-bottom-sm padding text-xl text-black" style="border-radius: 10rpx;">
			<view class="flex align-center justify-between padding-left padding-right padding-bottom-sm solid-bottom" @click="handleToMyCourse">
				<view class="flex align-center">
					<view class="iconfont icon-wodekecheng margin-right-sm"></view>
					<view>我的课程</view>
				</view>
				<view class="cuIcon-right"></view>
			</view>
			<navigator class="flex align-center justify-between padding-left padding-right padding-top-sm padding-bottom-sm solid-bottom" url="/pages/course/course-today/course-today" hover-class="none">
				<view class="flex align-center">
					<view class="iconfont icon-jinrikecheng margin-right-sm"></view>
					<view>今日课程</view>
				</view>
				<view class="cuIcon-right"></view>
			</navigator>
			<navigator class="flex align-center justify-between padding-left padding-right padding-top-sm" url="/pages/course/my-experience/my-experience" hover-class="none">
				<view class="flex align-center">
					<view class="iconfont icon-mianfeishiting margin-right-sm"></view>
					<view>我的试听课</view>
				</view>
				<view class="cuIcon-right"></view>
			</navigator>
		</view>
		
		<!-- 修改密码 -->
		<view v-show="token" class="cu-card bg-white margin-left margin-right margin-bottom-sm padding text-xl text-black" style="border-radius: 10rpx;">
			<navigator class="flex align-center justify-between padding-left padding-right" url="/pages/editpass/editpass" hover-class="none">
				<view class="flex align-center">
					<view class="iconfont icon-ziyuanxhdpi margin-right-sm"></view>
					<view>修改密码</view>
				</view>
				<view class="cuIcon-right"></view>
			</navigator>
		</view>
		
		<!-- 我的订单 -->
		<view class="cu-card bg-white margin-left margin-right margin-bottom-xs padding text-xl text-black" style="border-radius: 10rpx;">
			<navigator class="flex align-center justify-between padding-left padding-right" url="/pages/order/my-order/my-order" hover-class="none">
				<view class="flex align-center">
					<view class="iconfont icon-dingdan margin-right-sm"></view>
					<view>我的订单</view>
				</view>
				<view class="cuIcon-right"></view>
			</navigator>
		</view>
		
		<!-- 退出登录 -->
		<view v-show="token" class="flex align-center" style="margin-top: 40rpx;">
			<button @click="logout" style="width: 80%;">退出登录</button>
		</view>
		
		<!-- <button class="cu-btn bg-green" @click="handleClick">订阅消息</button> -->

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
			}
		},
		computed: {
			...mapGetters(['token', 'avatar', 'realName'])
		},
		methods: {
			logout() {
				this.$store.dispatch('user/logout')
				console.log('退出登录');
			},
			// 跳转我的课程页面
			handleToMyCourse() {
				this.$store.commit("setting/set_pagecur", "course")
			},
			// 测试订阅消息方法
			handleClick() {
				console.log("调用");
				//#ifdef MP-WEIXIN
				wx.requestSubscribeMessage({
				  tmplIds: ['HJ2E2KIjz1HWdZDFVA0nspUgafpXvv5XcTeLCm-WJhE'],
				  success (res) {
					  const s = res['HJ2E2KIjz1HWdZDFVA0nspUgafpXvv5XcTeLCm-WJhE']
					  if (s === "accept") {
						  console.log("用户同意订阅该条id对应的模板消息");
					  } else if (s === "reject") {
						  console.log("用户拒绝订阅该条id对应的模板消息");
					  } else if (s === "ban") {
						  console.log("已被后台封禁");
					  } else {
						  console.log("该模板因为模板标题同名被后台过滤");
					  }
				  },
				  fail (err){
					  console.log("错误");
					  console.log(err);
				  },
				  complete() {
					  console.log("调用结束");
				  }
				})
				//#endif
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
